<template>
  <div class="home">
     <home-head></home-head>
     <home-swiper :banner="banner"></home-swiper>
     <home-icons :icons="icons"></home-icons>
     <home-recommend :recommendList="recommendList"></home-recommend>
     <home-weekend :weekendList="weekendList"></home-weekend>
  </div>
</template>

<script>
import HomeHead from './components/Head'
import HomeSwiper from './components/swiper'
import HomeIcons from './components/Icons'
import HomeRecommend from './components/Recommend'
import HomeWeekend from './components/weekend'
import {HomeModel} from '../../models/HomeModel'
const homeModel =new HomeModel();
export default {
  name: 'home',
  components: {
     HomeHead,
     HomeSwiper,
     HomeIcons,
     HomeRecommend,
     HomeWeekend
  },
  data(){
    return {
      banner:[],
      icons:[],
      recommendList:[],
      weekendList:[]
    }
  },
  mounted() {
   homeModel.getHomeData().then(res=>{
     let data=res.data.data;
    //  console.log(data)
     let {banner,icons,recommendList,weekendList}=data;
     this.banner=banner;
     this.icons=icons;
     this.recommendList=recommendList;
     this.weekendList=weekendList;
   })
  },
}
</script>
<style lang="scss" scoped>

</style>

